<template>
  <div class="up-container">
    <!-- 1.面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item>酒店</el-breadcrumb-item>
      <el-breadcrumb-item>{{locationCity}}酒店预订</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row>
      <el-col :span="24">
        <!-- 2.酒店栏目查询 -->
        <!-- 2.1城市查询 -->
        <el-autocomplete
          class="inline-input"
          v-model="form.cityName"
          :fetch-suggestions="querySearchCity"
          placeholder="切换城市"
          :trigger-on-focus="false"
          @select="handleSelectCity"
        ></el-autocomplete>
        <!-- 2.2时间查询 -->
        <el-date-picker
          v-model="form.time"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="disableBeforeDay"
          @change="handlerTime"
        ></el-date-picker>
        <!-- 2.3人数查询 -->
        <el-input
          class="inline-input"
          placeholder="人数未定"
          v-model="peopleTip"
          suffix-icon="el-icon-user"
          v-popover:popover
        ></el-input>
        <!-- 2.4人数查询弹窗 -->
        <el-popover
          v-model="popUpIsShow"
          class="popUp"
          ref="popover"
          placement="bottom"
          width="323"
          trigger="click"
        >
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <span class="room">每间</span>
                <el-select
                  class="popUp"
                  size="mini"
                  v-model="form.people"
                  placeholder="2成人"
                  @change="handlePeople"
                >
                  <el-option v-for="(item,index) in adults" :key="index" :value="item+' 成人'"></el-option>
                </el-select>
                <el-select
                  class="popUp"
                  size="mini"
                  v-model="form.children"
                  placeholder="0儿童"
                  @change="handleChildren"
                >
                  <el-option v-for="(item,index) in children" :key="index" :value="item+' 儿童'"></el-option>
                </el-select>
              </div>
              <p class="line"></p>
              <el-row type="flex" class="row-bg" justify="end">
                <el-button type="primary" size="mini" @click="getPeople">确定</el-button>
              </el-row>
            </el-col>
          </el-row>
        </el-popover>
        <el-button type="primary" @click="selectHotel">查询酒店</el-button>
      </el-col>
    </el-row>

    <el-row class="upSide">
      <!-- 景点区域 -->
      <el-col :span="14" class="sec-outside">
        <el-row class="sec-container">
          <el-col :span="3">区域：</el-col>
          <el-col :span="21">
            <div :class="sceneryIsShow?'secneryActive':'secnery'">
              <span v-for="spot in scenery" :key="spot.id">{{spot.name}}</span>
              <a href="javascript:void(0)" @click="handleShowScenery">
                <i :class="sceneryIsShow ?'el-icon-arrow-up': 'el-icon-arrow-down'"></i>
                等{{scenery.length}}个景点
              </a>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <span class="price">
              均价：
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="top"
              >
                <i class="iconfont icon-wenhao"></i>
              </el-tooltip>
            </span>
          </el-col>
          <el-col :span="21">
            <div class="average-price">
              <el-tooltip
                v-for="(item,index) in hotelList"
                :key="index"
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom"
              >
                <span>
                  <i class="iconfont icon-huangguan"></i>
                  <i class="iconfont icon-huangguan"></i>
                  <i class="iconfont icon-huangguan"></i>
                  ￥{{item.visits_month}}
                </span>
              </el-tooltip>
              <!-- <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom"
              >
                <span>
                  <i class="iconfont icon-huangguan"></i>
                  <i class="iconfont icon-huangguan"></i>
                  <i class="iconfont icon-huangguan"></i>
                  ￥{{item.price}}
                </span>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom"
              >
                <span>
                  <i class="iconfont icon-huangguan"></i>
                  <i class="iconfont icon-huangguan"></i>
                  <i class="iconfont icon-huangguan"></i>
                  ￥{{item.price}}
                </span>
              </el-tooltip>-->
            </div>
          </el-col>
        </el-row>
      </el-col>
      <!-- 地图定位区域 -->
      <el-col :span="10">
        <div id="container"></div>
        <div id="panel"></div>
      </el-col>
    </el-row>

    <!-- 酒店筛选css -->
    <el-form class="list-filter" ref="form" :model="hotel" label-width="80px">
      <el-row>
        <el-col :span="5" class="filter">
          <!-- 酒店价钱筛选条 -->
          <el-row>
            <el-col :span="12">价格</el-col>
            <el-col :span="12">
              <span class="right">0-4000</span>
            </el-col>
          </el-row>
          <el-slider v-model="form.hotel.price" :max="4000" @change="handleSelectPrice"></el-slider>
        </el-col>
        <!-- 酒店等级 -->
        <el-col :span="4" class="filter">
          <el-row :span="24">酒店等级</el-row>
          <el-col :span="24">
            <el-dropdown @command="handleCommandLevel">
              <div>
                <span class="el-dropdown-link level">{{handlerShowLevel}}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </div>
              <el-row>
                <el-col :span="24"></el-col>
              </el-row>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  class="pull-level"
                  v-for="level in hotel.levels"
                  :key="level.id"
                  :command="level"
                  :icon="filter.level.indexOf(level.name) != -1 ?'el-icon-star-on':'el-icon-star-off'"
                  :class="filter.level.indexOf(level.name) != -1 ?'has-star':''"
                >{{level.name}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-col>
        <!-- 酒店类型 -->
        <el-col :span="4" class="filter">
          <el-row :span="24">酒店类型</el-row>
          <el-col :span="24">
            <el-dropdown @command="handleCommandType">
              <div>
                <span class="level">{{handlerShowType}}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </div>

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="type in hotel.types"
                  :key="type.id"
                  :command="type"
                  :icon="filter.type.indexOf(type.name) != -1 ?'el-icon-star-on':'el-icon-star-off'"
                  :class="filter.type.indexOf(type.name) != -1 ?'has-star':''"
                >{{type.name}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-col>
        <!-- 酒店设施 -->
        <el-col :span="4" class="filter">
          <el-row :span="24">酒店设施</el-row>
          <el-col :span="24">
            <el-dropdown @command="handleCommandAsset">
              <div>
                <span class="level">{{ handlerShowAsset}}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  :icon="filter.asset.indexOf(asset.name) != -1 ?'el-icon-star-on':'el-icon-star-off'"
                  v-for="asset in hotel.assets"
                  :key="asset.id"
                  :command="asset"
                  :class="filter.asset.indexOf(asset.name) != -1 ?'has-star':''"
                >{{asset.name}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-col>
        <!-- 酒店品牌 -->
        <el-col :span="4" class="filter">
          <el-row :span="24">酒店品牌</el-row>
          <el-col :span="24">
            <el-dropdown @command="handleCommandBrand">
              <div>
                <span class="level">{{handlerShowBrand}}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </div>
              <!-- dropdown组件 -->
              <el-dropdown-menu slot="dropdown" class="mydropdown">
                <el-dropdown-item
                  v-for="brand in hotel.brands"
                  :key="brand.id"
                  :command="brand"
                  :icon="filter.brand.indexOf(brand.name) != -1 ?'el-icon-star-on':'el-icon-star-off'"
                  :class="filter.brand.indexOf(brand.name) != -1 ?'has-star':''"
                >{{brand.name}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-col>
        <el-col :span="3" class="filter last-filter">
          <el-button type="primary" size="small" @click="handleDelAllSelection">撤销条件</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 酒店子组件 -->
    <hotelList :hotelList="hotelList"></hotelList>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="sizes,prev, pager, next"
      :total="total"
      :current-page="currentPage"
      :page-sizes="[4, 6, 8]"
      prev-text="上一页"
      next-text="下一页"
    ></el-pagination>
  </div>
</template>

<script>
//格式化日期插件;
import moment from "moment";
import hotelList from "@/components/hotel/hotelList.vue";
export default {
  components: {
    hotelList,
  },
  data() {
    return {
      //选择机票和酒店的数据；
      form: {
        cityName: "",
        time: "",
        enterTime: "",
        leftTime: "",
        people: 2 + "成人",
        children: 0 + "儿童",
        totalPeople: 0,
        cityId: 0,
        hotel: {
          price: 4000,
          level: [],
          type: [],
          asset: [],
          brand: [],
        },
      },
      adults: [1, 2, 3, 4, 5, 6, 7],
      children: [1, 2, 3, 4],
      //选中人数提示
      peopleTip: "",
      //分页总条数
      total: 10,
      // 当前页
      currentPage: 1,
      // 当前显示条数
      currentSize: 4,
      //渲染的酒店数据；
      hotel: {
        price: 4000,
        //酒店设施
        assets: [],
        //酒店品牌
        brands: [],
        //酒店等级
        levels: [],
        //酒店类型
        types: [],
      },
      //下拉筛选框选择的数据；
      filter: {
        type: [],
        brand: [],
        asset: [],
        level: [],
      },
      //当前定位城市
      locationCity: "",
      //城市景点的数据渲染;
      scenery: [],
      //城市景点是否显示;
      sceneryIsShow: false,
      //弹窗是否显示
      popUpIsShow: false,
      //储存所有的当前城市的酒店数据
      hotelList: [],
      mapHotelList: [],
      // 点标记数组
      marklist: [],
      map: null,

      //禁用过去日期方法；
      disableBeforeDay: {
        disabledDate(time) {
          return time.getTime() < new Date().setDate(new Date().getDate() - 1);
        },
      },
    };
  },
  watch: {
    ["form.people"]() {
      this.calTotal;
    },
    ["form.children"]() {
      this.calTotal;
    },
    locationCity(val) {
      //加载酒店列表
      this.$message({
        message: `您当前所在的城市为${val}`,
        center: true,
        type: "success",
      });
    },
    ["form.hotel"]: {
      handler(val) {
        // console.log("酒店筛选条值改变");
        // console.log(val);
        // this.currentPage = 1;
        // console.log("watch：监听器触发，调用querySearchHotel");
        // this.querySearchHotel(this.currentPage, this.currentSize);
      },
      deep: true,
    },
  },
  computed: {
    calTotal() {
      return parseInt(this.form.people) + parseInt(this.form.children);
    },
    handlerShowAsset() {
      if (this.filter.asset.length == 1) {
        return this.filter.asset[0];
      } else if (this.filter.asset.length > 1) {
        return "已选" + this.filter.asset.length + "项";
      } else if (this.filter.asset.length == 0) {
        return "不限";
      }
    },
    handlerShowType() {
      if (this.filter.type.length == 1) {
        return this.filter.type[0];
      } else if (this.filter.type.length > 1) {
        return "已选" + this.filter.type.length + "项";
      } else if (this.filter.type.length == 0) {
        return "不限";
      }
    },
    handlerShowLevel() {
      if (this.filter.level.length == 1) {
        return this.filter.level[0];
      } else if (this.filter.level.length > 1) {
        return "已选" + this.filter.level.length + "项";
      } else if (this.filter.level.length == 0) {
        return "不限";
      }
    },
    handlerShowBrand() {
      if (this.filter.brand.length == 1) {
        return this.filter.brand[0];
      } else if (this.filter.brand.length > 1) {
        return "已选" + this.filter.brand.length + "项";
      } else if (this.filter.brand.length == 0) {
        return "不限";
      }
    },
  },
  mounted() {
    if (!window.AMap) {
      console.log("是第一次加载");
      // 第一次加载
      window.onLoad = () => {
        // 如果高德js加载完毕了 那么 全局变量中肯定会一个  AMap 对象
        // console.log("执行初始化地图方法");
        this.init();
      };
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=62de0901a6626e447a35cb45eae7c067&callback=onLoad";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    } else {
      console.log("不是第一次加载");
      this.init();
    }
  },
  methods: {
    // 地图方法
    // 3.构建自定义信息窗体
    createInfoWindow(title, content) {
      var info = document.createElement("div");
      info.className = "custom-info input-card content-window-card";

      //可以通过下面的方式修改自定义窗体的宽高
      //info.style.width = "400px";
      // 定义顶部标题
      var top = document.createElement("div");
      var titleD = document.createElement("div");
      var closeX = document.createElement("img");
      top.className = "info-top";
      titleD.innerHTML = title;
      closeX.src = "https://webapi.amap.com/images/close2.gif";
      closeX.onclick = this.closeInfoWindow;

      top.appendChild(titleD);
      top.appendChild(closeX);
      info.appendChild(top);

      // 定义中部内容
      var middle = document.createElement("div");
      middle.className = "info-middle";
      middle.style.backgroundColor = "white";
      middle.innerHTML = content;
      info.appendChild(middle);

      // 定义底部内容
      var bottom = document.createElement("div");
      bottom.className = "info-bottom";
      bottom.style.position = "relative";
      bottom.style.top = "0px";
      bottom.style.margin = "0 auto";
      bottom.style.paddingBottom = "5px";
      bottom.style.backgroundColor = "white";
      var sharp = document.createElement("img");
      sharp.src = "https://webapi.amap.com/images/sharp.png";
      bottom.appendChild(sharp);
      info.appendChild(bottom);
      return info;
    },
    // 4.关闭信息窗体方法
    closeInfoWindow() {
      this.map.clearInfoWindow();
    },
    // 点击查询酒店触发函数
    selectHotel() {
      console.log("执行selectHotel");
      this.currentPage = 1;
      this.querySearchHotel(this.currentPage, this.currentSize);
    },
    //改变每页条数触发函数
    handleSizeChange(val) {
      console.log("每页显示：" + val + "条");
      this.currentSize = val;
      this.currentPage = 1;
      this.querySearchHotel(this.currentPage, this.currentSize);
    },
    // 改变当前页触发函数
    handleCurrentChange(val) {
      console.log("当前是第" + val + "页");
      this.currentPage = val;
      this.querySearchHotel(this.currentPage, this.currentSize);
    },

    //展示景点信息;
    handleShowScenery() {
      this.sceneryIsShow = !this.sceneryIsShow;
    },
    //查询城市
    async querySearchCity(str, cb) {
      if (str == "") {
        return;
      }
      const arr = (await this.$store.dispatch("hotel/asyncGetCityData", str))
        .data.data;

      // console.log("返回的城市数据");
      // console.log(arr);
      //若是没有找到城市，弹出警告框;
      if (arr.length == 0) {
        this.$message.warning("查无此城！");
        this.form.cityName = "";
        return;
      } else {
      }
      //保存搜索到的城市id；
      this.form.cityId = arr[0].id;
      console.log(`保存搜索到的城市id；` + this.form.cityId);
      //改造数组格式：[{value: '返回的数据'}]
      cb(arr.map((v) => ({ value: v.name })));
    },
    //选中城市
    async handleSelectCity(obj) {
      if (obj == "") {
        return;
      }
      console.log(obj);
      //选中城市后，查找城市的id，然后发送对应的酒店数据请求；
      const arr = (
        await this.$store.dispatch("hotel/asyncGetCityData", obj.value)
      ).data.data;

      //传入城市id重新加载酒店数据
      this.form.cityId = arr[0].id;
      this.currentPage = 1;
      this.querySearchHotel(this.currentPage, this.currentSize);
    },
    //查询日期
    handlerTime(value) {
      //value是一个数组，保存有两个时间;
      // console.log(value);

      this.form.enterTime = moment(value[0]).format("YYYY-MM-DD");
      this.form.leftTime = moment(value[1]).format("YYYY-MM-DD");
    },
    //查询人数
    handlePeople(val) {
      this.form.people = val;
    },
    handleChildren(val) {
      this.form.children = val;
    },
    //选择人数确定按钮
    getPeople() {
      this.form.totalPeople = this.calTotal;
      this.peopleTip = this.form.people + this.form.children;
      this.popUpIsShow = false;
    },
    //选择酒店价钱
    handleSelectPrice(price) {
      if (price === 0) {
        return;
      }
      this.form.hotel.price = price;
      this.currentPage = 1;
      this.querySearchHotel(this.currentPage, this.currentSize);
    },
    //选择酒店等级
    handleCommandLevel(level) {
      level.id = level.id.toString();
      if (this.form.hotel.level.indexOf(level.id) == -1) {
        this.form.hotel.level.push(level.id);
      } else {
        //数组中有值
        const index = this.form.hotel.level.findIndex((v) => v == level.id);
        this.form.hotel.level.splice(index, 1);
      }

      if (this.filter.level.indexOf(level.name) == -1) {
        this.filter.level.push(level.name);
      } else {
        //数组中有值
        const index = this.filter.level.findIndex((v) => v == level.name);
        this.filter.level.splice(index, 1);
      }
      this.currentPage = 1;
      this.querySearchHotel(this.currentPage, this.currentSize);
    },
    //选择酒店设施
    handleCommandAsset(asset) {
      // console.log(asset);
      asset.id = asset.id.toString();
      if (this.form.hotel.asset.indexOf(asset.id) == -1) {
        this.form.hotel.asset.push(asset.id);
      } else {
        //数组中有值
        const index = this.form.hotel.asset.findIndex((v) => v == asset.id);
        this.form.hotel.asset.splice(index, 1);
      }

      //数组中无值
      if (this.filter.asset.indexOf(asset.name) == -1) {
        this.filter.asset.push(asset.name);
      } else {
        //数组中有值
        const index = this.filter.asset.findIndex((v) => v == asset.name);
        this.filter.asset.splice(index, 1);
      }
      this.currentPage = 1;
      this.querySearchHotel(this.currentPage, this.currentSize);
    },
    //选择酒店类型
    handleCommandType(type) {
      // console.log(type);
      type.id = type.id.toString();
      if (this.form.hotel.type.indexOf(type.id) == -1) {
        this.form.hotel.type.push(type.id);
      } else {
        //数组中有值
        const index = this.form.hotel.type.findIndex((v) => v == type.id);
        this.form.hotel.type.splice(index, 1);
      }

      if (this.filter.type.indexOf(type.name) == -1) {
        this.filter.type.push(type.name);
      } else {
        //数组中有值
        const index = this.filter.type.findIndex((v) => v == type.name);
        this.filter.type.splice(index, 1);
      }
      this.currentPage = 1;
      this.querySearchHotel(this.currentPage, this.currentSize);
    },
    //选择酒店品牌
    handleCommandBrand(brand) {
      // console.log(brand);
      brand.id = brand.id.toString;
      if (this.form.hotel.brand.indexOf(brand.id) == -1) {
        this.form.hotel.brand.push(brand.id);
      } else {
        //数组中有值
        const index = this.form.hotel.brand.findIndex((v) => v == brand.id);
        this.form.hotel.brand.splice(index, 1);
      }

      if (this.filter.brand.indexOf(brand.name) == -1) {
        this.filter.brand.push(brand.name);
      } else {
        //数组中有值
        const index = this.filter.brand.findIndex((v) => v == brand.name);
        this.filter.brand.splice(index, 1);
      }
      this.currentPage = 1;
      this.querySearchHotel(this.currentPage, this.currentSize);
    },
    //撤销所有筛选条件
    handleDelAllSelection() {
      // 清除缓存
      localStorage.removeItem("localUrl");
      this.currentPage = 1;
      this.form.hotel.price = 4000;
      this.hotel.price = 4000;
      this.form.hotel.level = [];
      this.form.hotel.type = [];
      this.form.hotel.asset = [];
      this.form.hotel.brand = [];
      this.filter.level = [];
      this.filter.type = [];
      this.filter.asset = [];
      this.filter.brand = [];
      this.querySearchHotel(this.currentPage, this.currentSize);
    },
    //地图
    async init() {
      console.log("1、---执行init初始化地图方法");
      let that = this;
      //初始化地图时，若center属性缺省，地图默认定位到用户所在城市的中心
      new Promise((resolve) => {
        console.log("1.1---new AMap.Map");
        that.map = new AMap.Map("container", {
          resizeEnable: true,
          // center: [116.397428, 39.90923],
          // zoom: 13,
        });
        resolve();
      }).then(() => {
        console.log("1.2---异步加载插件");
        AMap.plugin(
          ["AMap.ToolBar", "AMap.Driving", "AMap.CitySearch"],
          function () {
            //异步加载插件 放大插件
            var toolbar = new AMap.ToolBar();
            that.map.addControl(toolbar);

            console.log("1.3---实例化城市查询类");
            //实例化城市查询类
            var citysearch = new AMap.CitySearch();
            //自动获取用户IP，返回当前城市
            citysearch.getLocalCity(async (status, result) => {
              // console.log(status);
              // console.log(result);
              if (status === "complete" && result.info === "OK") {
                if (result && result.city && result.bounds) {
                  var cityinfo = result.city;
                  var citybounds = result.bounds;
                  console.log(that.locationCity);
                  that.form.cityName = cityinfo;
                  that.locationCity = cityinfo;
                  console.log(`当前城市为${that.locationCity}`);
                  //渲染城市景点信息
                  await that.renderCityScenery();
                }
              }
            });
          }
        );
      });
    },
    //加载城市景点
    async renderCityScenery() {
      console.log("2、---执行renderCityScenery");
      // console.log("当前城市景点数据" + this.locationCity);

      const arr = (
        await this.$store.dispatch("hotel/asyncGetCityData", this.locationCity)
      ).data.data;

      this.scenery = arr[0].scenics;
      this.form.cityId = arr[0].id;
      console.log(`当前城市id${this.form.cityId},${this.locationCity}`);
      // 渲染酒店筛选项
      await this.initHotelOptions();
      this.currentPage = 1;
      await this.querySearchHotel(this.currentPage, this.currentSize);
    },

    //渲染酒店筛选条数据
    async initHotelOptions() {
      console.log(`3、---执行initHotelOptions`);
      let localUrl = localStorage.getItem("localUrl");
      if (localUrl) {
        console.log(`3.1---有localUrl，将${localUrl}添加到地址栏：`);
        this.$router.push("/hotel" + localUrl);
      }
      await this.$axios.get("/hotels/options").then((res) => {
        let backData = res.data.data;
        // console.log(backData);
        //酒店数据传给页面渲染;
        this.hotel.types = backData.types;
        this.hotel.levels = backData.levels;
        this.hotel.brands = backData.brands;
        this.hotel.assets = backData.assets;

        // console.log(this.$route.query);
        // this.currentSize = this.$route.query._limit;
        // this.currentPage = this.$route.query._start / this.currentSize + 1;
        // console.log(`修改当前页码：${},${this.currentSize}`);
        let {
          hotelasset,
          hoteltype,
          hotellevel,
          hotelbrand,
        } = this.$route.query;

        // console.log(hotelasset, hoteltype, hotellevel, hotelbrand);
        this.form.hotel.price =
          +this.$route.query.price_lt || this.form.hotel.price;
        this.hotel.price = +this.form.hotel.price;
        if (hotelasset) {
          hotelasset = Array.isArray(hotelasset)
            ? hotelasset
            : Array.of(hotelasset);
          this.form.hotel.asset = hotelasset;
          this.filter.asset = hotelasset.map((id) => {
            for (let i = 0; i < this.hotel.assets.length; i++) {
              if (this.hotel.assets[i].id == id) {
                return this.hotel.assets[i].name;
              }
            }
          });
        }
        if (hoteltype) {
          hoteltype = Array.isArray(hoteltype)
            ? hoteltype
            : Array.of(hoteltype);
          this.form.hotel.type = hoteltype;
          this.filter.type = hoteltype.map((id) => {
            for (let i = 0; i < this.hotel.types.length; i++) {
              if (this.hotel.types[i].id == id) {
                return this.hotel.types[i].name;
              }
            }
          });
        }
        if (hotellevel) {
          hotellevel = Array.isArray(hotellevel)
            ? hotellevel
            : Array.of(hotellevel);
          this.form.hotel.level = hotellevel;
          this.filter.level = hotellevel.map((id) => {
            for (let i = 0; i < this.hotel.levels.length; i++) {
              if (this.hotel.levels[i].id == id) {
                return this.hotel.levels[i].name;
              }
            }
          });
        }
        if (hotelbrand) {
          hotelbrand = Array.isArray(hotelbrand)
            ? hotelbrand
            : Array.of(hotelbrand);
          this.form.hotel.brand = hotelbrand;
          this.filter.brand = hotelbrand.map((id) => {
            for (let i = 0; i < this.hotel.brands.length; i++) {
              if (this.hotel.brands[i].id == id) {
                return this.hotel.brands[i].name;
              }
            }
          });
        }
      });
    },
    //查询酒店信息
    querySearchHotel(currentPage, currentSize) {
      let _that = this;

      console.log("4、---执行querySearchHotel");
      console.log("关闭信息窗体，清除所有markList点标记");
      _that.closeInfoWindow();
      console.log(this.marklist);
      this.map.remove(this.marklist);

      // let localUrl = localStorage.getItem("localUrl");
      // if (localUrl) {
      //   console.log(
      //     `initHotelOptions---有localUrl，将${localUrl}添加到地址栏：`
      //   );
      //   this.$router.push("/hotel" + localUrl);
      // }

      // 每次发送请求数据都初始化数据
      //改造对象中的数据结构；
      let str = "";
      const {
        cityId,
        cityName,
        leftTime,
        enterTime,
        totalPeople,
        hotel,
      } = this.form;

      str = `?city=${cityId}&price_lt=${hotel.price}&enterTime=${enterTime}&leftTime=${leftTime}&`;
      for (let num of hotel.asset) {
        str += `hotelasset=${num}` + "&";
      }
      for (let num of hotel.level) {
        str += `hotellevel=${num}` + "&";
      }
      for (let num of hotel.type) {
        str += `hoteltype=${num}` + "&";
      }
      for (let num of hotel.brand) {
        str += `hotelbrand=${num}` + "&";
      }
      str = str.substr(0, str.length - 1);

      // start为从第几条开始显示数据
      const _start = (currentPage - 1) * currentSize;
      const _limit = currentSize;

      // 将拼接好的参数用req接收
      let req = `${str}&_limit=${_limit}&_start=${_start}`;

      console.log("4.1---将req存入本地：" + req);
      localStorage.setItem("localUrl", req);
      console.log(`4.1.1--有localUrl，将${req}添加到地址栏：`);
      this.$router.push("/hotel" + req);
      console.log("发送ajax请求");
      //发送请求
      this.$axios.get(`/hotels${req}`).then((res) => {
        // console.log(res);
        this.hotelList = res.data.data;
        this.total = res.data.total;

        // 8.遍历酒店列表hoteList
        console.log(`4.2---遍历下面这个酒店列表：`);
        console.log(this.hotelList);

        //保存价钱的渲染数组；
        // this.priceList = this.hotelList.products;
        // console.log("----------------酒店价钱-------------------");
        // console.log(this.priceList);

        this.marklist = this.hotelList.map((item, index) => {
          console.log("遍历出来的没一个item");
          console.log(item);
          var marker = new AMap.Marker({
            map: this.map,
            position: new AMap.LngLat(
              item.location.longitude,
              item.location.latitude
            ),
            title: `${item.address}`,
            content: `<i class="iconfont icon-ditudingweidian-weixuanzhong"><span class="number">${
              index + 1
            }</span></i>`,
          });
          // 8.1遍历的时候点标记添加到地图
          this.map.add(marker);
          //8.2实例化信息窗体，将对应的酒店信息添加到地图点标记上
          var title = `${
              item.breadcrumb.split(">")[item.breadcrumb.split(">").length - 1]
            }`,
            content = [];
          content.push(
            `<img src=${item.photos} style='width:100px;height:70px;'>地址：${item.address}`
          );
          content.push(`电话：${item.phone.split(" ")[0]}`);
          // 详细信息跳转到酒店详情
          content.push(
            "<a href='https://hotels.ctrip.com/hotel/694679.html'>详细信息</a>"
          );

          // 8.3创建窗体信息
          var infoWindow = new AMap.InfoWindow({
            isCustom: true, //使用自定义窗体
            content: _that.createInfoWindow(title, content.join("<br/>")),
            offset: new AMap.Pixel(16, -45),
          });

          //8.4给marker点标记绑定鼠标点击事件：弹出自定义的信息窗体
          AMap.event.addListener(marker, "click", function () {
            console.log(infoWindow);
            console.log(_that.map);
            infoWindow.open(_that.map, marker.getPosition());
          });
          return marker;
        });
        console.log(`4.3---最后的marklist:`);
        console.log(this.marklist);
        // 9.添加完点标记，自动显示对应地图位置
        this.map.setFitView();
      });
    },
  },
};
</script>

<style scoped lang='less'>
// ------------------------
.up-container {
  font-size: 16px;
}
.breadcrumb {
  font-size: 16px;
  font-weight: 400;
  margin: 20px 0;
}

.inline-input {
  width: 200px;
  height: 50px;
  margin-right: 20px;
}
/deep/ .el-input__icon {
  font-size: 15px;
}
.popUp {
  width: 115px;
}

.line {
  width: 283px;
  height: 1px;
  background: #ccc;
  margin: 25px 5px;
}
.upSide {
  margin-top: 15px;
}
.sec-outside {
  padding-right: 50px;
}
.sec-container {
  position: relative;
  margin-bottom: 65px;
}
.secnery {
  width: 475px;
  height: 50px;
  overflow: hidden;
  a {
    position: absolute;
    left: 66px;
    bottom: -27px;
    color: orangered;
  }
}
.secneryActive {
  width: 475px;
  overflow: visible;
  // height: 70px;

  a {
    position: absolute;
    left: 66px;
    bottom: -27px;
    color: orangered;
  }
  span {
    margin-right: 10px;
  }
}
.secnery > span {
  margin-right: 10px;
}
.price {
  position: relative;
  i {
    font-size: 20px;
    color: #ccc;
    position: absolute;
    right: -2px;
    top: -20px;
  }
}
.room {
  margin-right: 20px;
}
.average-price {
  span {
    margin-right: 20px;
    i {
      color: orangered;
    }
  }
}
/*地图*/
/deep/ #container {
  width: 100%;
  height: 300px;

  // 地图样式
  /deep/ .icon-ditudingweidian-weixuanzhong {
    color: #4297fc;
    font-size: 32px;
    position: relative;
    span {
      margin-left: 5px;
      font-size: 11px;
    }
  }

  /deep/ .number {
    position: absolute;
    top: 2px;
    left: 8px;
    /* transform: translateX(-50%); */
    color: #fff;
    font-size: 16px;
  }
  /deep/ .content-window-card {
    position: relative;
    box-shadow: none;
    bottom: 0;
    left: 0;
    width: auto;
    padding: 0;
  }

  /deep/ .content-window-card p {
    height: 2rem;
  }

  /deep/ .custom-info {
    border: solid 1px silver;
  }

  /deep/ div.info-top {
    position: relative;
    background: none repeat scroll 0 0 #f9f9f9;
    border-bottom: 1px solid #ccc;
    border-radius: 5px 5px 0 0;
  }

  /deep/ div.info-top div {
    display: inline-block;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    line-height: 31px;
    padding: 0 10px;
  }

  /deep/ div.info-top img {
    position: absolute;
    top: 10px;
    right: 10px;
    transition-duration: 0.25s;
  }

  /deep/ div.info-top img:hover {
    box-shadow: 0px 0px 5px #000;
  }

  /deep/ div.info-middle {
    font-size: 12px;
    padding: 10px 6px;
    line-height: 20px;
  }

  /deep/ div.info-bottom {
    height: 0px;
    width: 100%;
    clear: both;
    text-align: center;
  }

  /deep/ div.info-bottom img {
    position: relative;
    z-index: 104;
  }

  /deep/ .info-middle img {
    float: left;
    margin-right: 6px;
  }
}

/*酒店筛选*/
.list-filter {
  width: 100%;
  //   line-height: 23px;
  margin-top: 20px;
  border: 1px solid #ddd;
  padding: 5px 20px;
  color: #666;
  margin-bottom: 20px;

  .filter {
    height: 70px;
    border-right: 1px solid #ddd;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    &.last-filter {
      border-right: none;
      padding-top: 25px;
      padding-left: 32px;
    }

    .hotel-brands {
      height: 400px;
    }
  }
  /deep/ .el-row {
    margin-bottom: 5px;
  }
  /deep/ .el-dropdown-menu__item {
    width: 120px;
  }
  .level {
    display: inline-block;
    width: 90px;
  }
}
/deep/ .el-pagination {
  text-align: right;
}
.mydropdown {
  overflow-y: auto;
  height: 333px;
}
.has-star {
  color: orangered;
}
</style>